<article class="module width_full">
	<header>
		<h3 class="tabs_involved">在线客服设置</h3>
	</header>

	<form action="{url:/seller/online_update}" method="post" name='service_online'>
		<div class="module_content">
			<table class='tablesorter' id='service_box'>
				<thead>
					<th>客服名称</th>
					<th>QQ号码</th>
					<th>操作</th>
				</thead>

				<tbody></tbody>

				<tfoot>
					<tr>
						<td colspan='3'>
							<button type='button' class='btn' onclick="add_service();"><span>添加客服</span></button>
						</td>
					</tr>
				</tfoot>

				<script type='text/html' id='serviceTrTemplate'>
				<tr>
					<td><input type='text' name='service_name[]' class='middle' value='<%=name%>' /></td>
					<td><input type='text' name='service_qq[]' class='middle' value='<%=qq%>' /></td>
					<td>
						<img class='operator' src='{skin:images/main/icon_asc.gif}' alt='向上' title='向上' />
						<img class='operator' src='{skin:images/main/icon_desc.gif}' alt='向下' title='向下' />
						<img class='operator' src='{skin:images/main/icon_del.gif}' alt='删除' title='删除' />
					</td>
				</tr>
				</script>
			</table>
		</div>

		<footer>
			<div class="submit_link">
				<input class="alt_btn" type="submit" value="确 定">
				<input type="reset" value="重 置">
			</div>
		</footer>
	</form>
</article>

<script type="text/javascript">
//生成在线客服
{if:isset($qq) && $qq}
var serviceOnlineList = {echo:JSON::encode($qq)};
for(var index in serviceOnlineList)
{
	add_service(serviceOnlineList[index]);
}
{else:}
	add_service();
{/if}

//添加客服
function add_service(data)
{
	var data = data ? data : {};
	var serviceTrHtml = template.render('serviceTrTemplate',data);
	$('#service_box tbody').append(serviceTrHtml);
	var last_index = $('#service_box tbody tr').size()-1;
	buttonInit(last_index,'#service_box');
}

//操作按钮绑定
function buttonInit(indexValue,ele)
{
	ele = ele || "#guide_box";
	if(indexValue == undefined || indexValue === '')
	{
		var button_times = $(ele+' tbody tr').length;

		for(var item=0;item < button_times;item++)
		{
			buttonInit(item,ele);
		}
	}
	else
	{
		var obj = $(ele+' tbody tr:eq('+indexValue+') .operator')

		//功能操作按钮
		obj.each(
			function(i)
			{
				switch(i)
				{
					//向上排序
					case 0:
					{
						$(this).click(
							function()
							{
								var insertIndex = $(this).parent().parent().prev().index();
								if(insertIndex >= 0)
								{
									$(ele+' tbody tr:eq('+insertIndex+')').before($(this).parent().parent());
								}
							}
						)
					}
					break;

					//向上排序
					case 1:
					{
						$(this).click(
							function()
							{
								var insertIndex = $(this).parent().parent().next().index();
								$(ele+' tbody tr:eq('+insertIndex+')').after($(this).parent().parent());
							}
						)
					}
					break;

					//删除排序
					case 2:
					{
						$(this).click(
							function()
							{
								var obj = $(this);
								art.dialog.confirm('确定要删除么？',function(){obj.parent().parent().remove()});
							}
						)
					}
					break;
				}
			}
		)
	}
}
</script>